$(function () {
  // 和后端交互

  // ### 短信注册
  // 1. 获取按钮，绑定点击事件
  $('#regBtn_2').click(function (e) {
    // 2. 事件处理函数中
    // 2.1 阻止表单提交
    e.preventDefault()
    // 2.2 获取表单数据
    let mobile = $('.mobile').val()
    let code = $('.code').val()
    if (!mobile || !code) {
     /*  swal({
        title: '请填写表单数据',
        text: '美团提示!',
        icon: 'error',
        button: '确定!',
      }) */
      cocoMessage.error('请填写表单数据');
      return
    }
    // 2.3 请求接口
    $.post(
      '/api/sms/registry.jsp',
      { mobile, code },
      (res) => {
        // 2.4 判断返回的状态：成功-提示，重定向，失败-弹框提示
        if (res.meta.state === 201) {
          /* swal({
            title: res.meta.msg,
            text: '美团提示!',
            icon: 'success',
            button: '确定!',
          }) */
          cocoMessage.success(res.meta.msg);

          setTimeout(() => {
            location.href = './login.html'
          }, 3000)
        } else {
         /*  swal({
            title: res.meta.msg,
            text: '美团提示!',
            icon: 'error',
            button: '确定!',
          }) */
          cocoMessage.error(res.meta.msg);
        }
      },
      'json'
    )
  })

  // ### 验证码切换
  $('.captcha img').click(function () {
    // 留心：浏览器会根据url缓存
    // 然后：第一次状态码200  第二次304 如果后端服务器文件没有被修改
    // 因此：让url具备唯一性
    // $(this).attr('src', `http://kg.zhaodashen.cn/mt/web/captcha.jsp`)
    $(this).attr(
      'src',
      `http://kg.zhaodashen.cn/mt/web/captcha.jsp?t=` +
      new Date().getTime()
    )
  })

  // ### 普通注册
  // 1 获取普通注册按钮，绑定点击事件
  $('#regBtn_1').click(function (e) {
    // 2 事件处理函数中
    // 2.1 阻止提交
    e.preventDefault()
    // 2.2 获取数据
    let uname = $('.account').val()
    let pwd = $('.pwd').val()
    let pwd2 = $('.pwd2').val()
    let captcha = $('.captcha input').val()
    if (!uname || !pwd || !pwd2 || !captcha) {
      /* swal({
        title: '请填写表单数据后注册',
        text: '美团提示!',
        icon: 'error',
        button: '确定!',
      }) */
      cocoMessage.error('请填写表单数据后注册');
      return
    }
    if (pwd != pwd2) {
      /* swal({
        title: '两次输入的密码不一致',
        text: '美团提示!',
        icon: 'error',
        button: '确定!',
      }) */
      cocoMessage.error('两次输入的密码不一致');
      return
    }
    // 2.3 请求接口
    $.post(
      '/api/user/registry.jsp',
      { uname, pwd, captcha },
      (res) => {
        // console.log(res);
        // 2.4 判断：失败弹框提示、成功提示&&重定向到登录页
        if (res.meta.state === 201) {
          /* swal({
            title: '注册成功，请登录...',
            text: '美团提示!',
            icon: 'error',
            button: '确定!',
          }) */
          cocoMessage.success('注册成功，请登录...');
          setTimeout(() => {
            location.href = './login.html'
          }, 3000)
        } else {
          /* swal({
            title: res.meta.msg,
            text: '美团提示!',
            icon: 'error',
            button: '确定!',
          }) */
          cocoMessage.error(res.meta.msg);
        }
      },
      'json'
    )
  })

  // 切换注册方式
  $('.mobileBtn').click(function () {
    $('form').show()
    $(this).parents('form').hide()
  })
})

// 行为验证码
$.ajax({
  url:
    'https://www.geetest.com/demo/gt/register-slide?t=' +
    new Date().getTime(), // 加随机数防止缓存
  type: 'get',
  dataType: 'json',
  success: function (data) {
    $('#text').hide()
    $('#wait').show()
    // 调用 initGeetest 进行初始化
    // 参数1：配置参数
    // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
    initGeetest(
      {
        // 以下4个配置参数为必须，不能缺少
        gt: data.gt,
        challenge: data.challenge,
        offline: !data.success, // 表示用户后台检测极验服务器是否宕机
        new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机

        product: 'popup', // 产品形式，包括：float，popup
        width: '280px',
        https: true,

        // 更多配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
      },
      function (captchaObj) {
        captchaObj.appendTo('#captcha')
        captchaObj.onReady(function () {
          $('#wait').hide()
        })

        // 短信倒计时特效
        let sendSmsTime = 10
        let t = null
        // 1. 获取按钮，绑定点击事件
        $('#sendSmsBtn').click(function () {
          let mobile = $('.mobile').val()
          if (mobile == '' || !/^1\d{10}$/.test(mobile)) {
            /* swal({
              title: '请输入正确手机号',
              text: '美团提示!',
              icon: 'error',
              button: '确定!',
            }) */
            cocoMessage.error('请输入正确手机号');
            return
          }

          // 判断行为验证码
          let result = captchaObj.getValidate()
          if (!result) {
            /* swal({
              title: '请先完成行为验证码验证',
              text: '美团提示!',
              icon: 'error',
              button: '确定!',
            }) */
            cocoMessage.error('请先完成行为验证码验证');
            return
          }

          if (sendSmsTime != 10) return // 节流方式

          // 2. 事件处理函数中
          // 2.1 JS效果 改文字【重新发送验证码(9)】
          sendSmsTime--
          $(this).text(`重新发送验证码(${sendSmsTime})`)
          // 2.2 JS效果 定时器每隔1s改一次
          t = setInterval(() => {
            // 重置清除定时器判断：1-清除定时器、2-全局时间重置、3-页面按钮文字还原
            if (sendSmsTime <= 1) {
              clearInterval(t)
              sendSmsTime = 10
              $(this).text(`获取手机动态码`)
              return
            }
            sendSmsTime--
            $(this).text(`重新发送验证码(${sendSmsTime})`)
          }, 1000)

          // 2.3 后端交互 发送异步请求
          $.post(
            '/api/sms/send.jsp',
            { mobile },
            (res) => {
              // console.log(res);
              if (res.meta.state !== 201) {
                /* swal({
                  title: res.meta.msg, // 比如我这边里面做了接口安全 1s种发送n个请求我就给你限制了
                  text: '美团提示!',
                  icon: 'error',
                  button: '确定!',
                }) */
                cocoMessage.error(res.meta.msg);
              }
            },
            'json'
          )
        })

        // 更多接口说明请参见：http://docs.geetest.com/install/client/web-front/
        window.gt = captchaObj
      }
    )
  },
})
// 行为验证码
